import React from 'react'
/**
 * 在各个组件中使用：
 * 1. 获取数据 state：
 * 2. 修改数据需要dispatch
 */
// import store from './store'
import {addNum, decNum} from './store/slice/count'
/**
 * useSelector： 获取数据
 * useDispatch： 获得dispatch方法
 */
import { useSelector, useDispatch } from 'react-redux'
export default function App() {
    // let {num} = store.getState().count
    /**
     * useSelector: 参数是一个回调函数，回调函数的参数，是仓库状态数据，回调函数的返回值，是useSelector的返回值
     */
    // let {num} = useSelector(state=>{
    //     console.log('useSelector state: ', state)
    //     return state.count
    // })
    // 4. 通过useSelector 获取数据 简写
    let {num} = useSelector(state=>state.count)
    // 获取整个仓库的状态数据
    // let state = useSelector(state=>state)

    // useDispatch 运行的结果，就是返回一个dispatch函数
    // 5. 通过useDispatch获取 dispatch函数
    const dispatch = useDispatch()
    return (
        <div>
            <h3>App</h3>
            <p>num : {num}</p>
            <p><button onClick={() => {
                // 6. 调用dispatch函数
                dispatch(addNum(10))
            }}>num++</button></p>
        </div>
    )
}
